<template>
	<view class="content">
		<view class="auth_one" v-if="procedure==0">
			<view class="pin">1、验证身份</view>
			<view class="or_pwd">原密码</view>
			<view class="ipt_pwd">
				<u-input v-model="value" :type="type" :border="border" :height="height" placeholder="请输入原密码"
					:auto-height="autoHeight" />
			</view>
			<view class="">
				<u-button type="success" :custom-style="customStyle"  @click="nextStep(1)">下一步</u-button>
			</view>
			<view class="forget_pwd " @click="nextStep(2)">
				忘记原密码？
			</view>
		</view>
		<view class="auth_one auth_two" v-if="procedure==1">
			<view class="pin">2、输入新的密码</view>
			<view class="or_pwd">新密码</view>
			<view class="ipt_pwd">
				<u-input v-model="value" :type="type" :border="border" :height="height" placeholder="请输入新密码"
					:auto-height="autoHeight" />
			</view>
			<view class="or_pwd">确认密码</view>
			<view class="ipt_pwd">
				<u-input v-model="value" :type="type" :border="border" :height="height" placeholder="请再次输入新密码"
					:auto-height="autoHeight" />
			</view>
			<view class="">
				<u-button type="success" :custom-style="customStyle">确定</u-button>
			</view>
		</view>
		<view class="auth_one auth_two" v-if="procedure==2">
			<view class="pin">手机号验证</view>
			<view class="phone ">
				输入手机号及验证码
			</view>
			<view class="or_pwd">手机号码</view>
			<view class="ipt_pwd">
				<u-input v-model="value" :type="type" :border="border" :height="height" placeholder="请输入手机号"
					:auto-height="autoHeight" />
			</view>
			<view class="or_pwd">验证码</view>
			<view class="ipt_pwd ipt_code">
				<u-input v-model="value" :type="type" :border="border" :height="height" placeholder="请输入验证码"
					:auto-height="autoHeight" />
				<view v-show="show" class="code">
					<u-button  @click="getCode()" type="success" size="mini">{{codeText}}</u-button>
				</view>
				<span v-show="!show" class="count">{{count}} s</span>
			</view>
			<view class="">
				<u-button type="success" :custom-style="customStyle">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				procedure:0,
				value: '',
				type: 'text',
				border: false,
				height: 40,
				autoHeight: true,
				customStyle: {
					marginTop: '64rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
				},
				codeText: '获取验证码',
				show: true,
				count: '',
				timer: null,
			};
		},
		methods: {
			nextStep(step){
				this.procedure=step
			},
			getCode() {
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
							this.codeText='重新获取'
						}
					}, 1000)
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		background: #FFFFFF;
		padding: 40rpx 70rpx 0 70rpx;
		box-sizing: border-box;
		height: 100vh;
		/deep/ .u-btn--success {
			  border-color: #0CCB82 !important;
			  background-color: #0CCB82 !important;
			  font-size: 32rpx;
			}
		.auth_one {
			.pin {
				font-size: 36rpx;
				color: #333333;
				font-weight: bold;
			}

			.or_pwd {
				font-size: 24rpx;
				color: #666666;
				margin: 36rpx 0 18rpx 0;
			}

			.ipt_pwd {
				border-bottom: 2rpx solid #EDEEF2;
				padding-bottom: 8rpx;
			}

			.ipt_code {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				align-items: center;
				.count{
					color: #0CCB82;
				}
				
				/deep/ .u-btn--success {
					  font-size: 24rpx;
					}
			}

			.forget_pwd {
				text-align: right;
				color: #999999;
				font-size: 24rpx;
				margin-top: 12rpx;
			}

			.phone {
				color: #999999;
				font-size: 28rpx;
			}
		}
	}
</style>
